<template>
    <div>
        <div class="card-header">
            <span>{{title}}</span>
            <svg t="1672119519593" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="2683" width="18" height="18">
                <path
                    d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512S793.6 1024 512 1024zM512 85.333333C277.333333 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667S746.666667 85.333333 512 85.333333z"
                    p-id="2684" fill="#d9d9d9"></path>
                <path
                    d="M469.333333 768c-17.066667 0-29.866667-8.533333-42.666667-21.333333-21.333333-29.866667-4.266667-72.533333 42.666667-187.733333 8.533333-17.066667 17.066667-38.4 25.6-55.466667-17.066667 12.8-42.666667 12.8-59.733333-4.266667-17.066667-17.066667-17.066667-42.666667 0-59.733333C443.733333 435.2 494.933333 384 554.666667 384c17.066667 0 29.866667 8.533333 42.666667 21.333333 21.333333 29.866667 4.266667 72.533333-42.666667 187.733333-8.533333 17.066667-17.066667 38.4-25.6 55.466667 17.066667-12.8 42.666667-12.8 59.733333 4.266667 17.066667 17.066667 17.066667 42.666667 0 59.733333C580.266667 716.8 529.066667 768 469.333333 768z"
                    p-id="2685" fill="#d9d9d9"></path>
                <path d="M576 277.333333m-64 0a1.5 1.5 0 1 0 128 0 1.5 1.5 0 1 0-128 0Z" p-id="2686" fill="#d9d9d9">
                </path>
                <path
                    d="M576 362.666667c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333333 85.333333S622.933333 362.666667 576 362.666667zM576 234.666667c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667 42.666667-17.066667 42.666667-42.666667S601.6 234.666667 576 234.666667z"
                    p-id="2687" fill="#d9d9d9"></path>
            </svg>
        </div>
        <div class="card-content">{{count}}</div>
        <div class="card-charts">
            <slot name="charts"></slot>
        </div>
        <div class="card-footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Details',
        props: ['title', 'count']
    }
</script>
<style scoped>
    .card-header {
        display: flex;
        justify-content: space-between;
        color: #cccccc;
        font-size: 16px;
    }

    .card-content {
        font-size: 30px;
        color: #333;
        padding: 10px 0 20px 0;
    }

    .card-charts {
        height: 60px;
    }

    .card-footer {
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
</style>